<style>
    .error-text-2 {
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-image: -webkit-linear-gradient(92deg, #333, #ed1c24);
        color: #333;
        font-size: 700%;
        font-weight: bold;
        font-weight: 100;
        letter-spacing: -.05em;
        line-height: 1;
        text-align: center;
    }

    .particle {
        background-color: #ed1c24;
        background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .3) 75%, rgba(0, 0, 0, 0));
        border-radius: 100%;
        box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, .25);
        height: 1rem;
        left: 50%;
        position: absolute;
        top: 50%;
        width: 1rem;
    }

    .particle--a {
        -moz-animation: particle-a 1.4s infinite linear;
        -o-animation: particle-a 1.4s infinite linear;
        -webkit-animation: particle-a 1.4s infinite linear;
        animation: particle-a 1.4s infinite linear;
    }

    .particle--b {
        -moz-animation: particle-b 1.3s infinite linear;
        -o-animation: particle-b 1.3s infinite linear;
        -webkit-animation: particle-b 1.3s infinite linear;
        animation: particle-b 1.3s infinite linear;
        background-color: #00A300;
    }

    .particle--c {
        -moz-animation: particle-c 1.5s infinite linear;
        -o-animation: particle-c 1.5s infinite linear;
        -webkit-animation: particle-c 1.5s infinite linear;
        animation: particle-c 1.5s infinite linear;
        background-color: #57889C;
    }

    @@-webkit-keyframes particle-a {
        0% {
            -webkit-animation-timing-function: ease-in-out;
            -webkit-transform: translate3D(-3rem, -3rem, 0);
            z-index: 1;
        }

        25% {
            height: 1.5rem;
            width: 1.5rem;
        }

        50% {
            -webkit-animation-timing-function: ease-in-out;
            -webkit-transform: translate3D(4rem, 3rem, 0);
            opacity: 1;
            z-index: 1;
        }

        55% { z-index: -1; }

        75% {
            height: .75rem;
            opacity: .5;
            width: .75rem;
        }

        100% {
            -webkit-transform: translate3D(-3rem, -3rem, 0);
            z-index: -1;
        }
    }

    @@-moz-keyframes particle-a {
        0% {
            -moz-animation-timing-function: ease-in-out;
            -moz-transform: translate3D(-3rem, -3rem, 0);
            z-index: 1;
        }

        25% {
            height: 1.5rem;
            width: 1.5rem;
        }

        50% {
            -moz-animation-timing-function: ease-in-out;
            -moz-transform: translate3D(4rem, 3rem, 0);
            opacity: 1;
            z-index: 1;
        }

        55% { z-index: -1; }

        75% {
            height: .75rem;
            opacity: .5;
            width: .75rem;
        }

        100% {
            -moz-transform: translate3D(-3rem, -3rem, 0);
            z-index: -1;
        }
    }

    @@-o-keyframes particle-a {
        0% {
            -o-animation-timing-function: ease-in-out;
            -o-transform: translate3D(-3rem, -3rem, 0);
            z-index: 1;
        }

        25% {
            height: 1.5rem;
            width: 1.5rem;
        }

        50% {
            -o-animation-timing-function: ease-in-out;
            -o-transform: translate3D(4rem, 3rem, 0);
            opacity: 1;
            z-index: 1;
        }

        55% { z-index: -1; }

        75% {
            height: .75rem;
            opacity: .5;
            width: .75rem;
        }

        100% {
            -o-transform: translate3D(-3rem, -3rem, 0);
            z-index: -1;
        }
    }

    @@keyframes particle-a {
        0% {
            animation-timing-function: ease-in-out;
            transform: translate3D(-3rem, -3rem, 0);
            z-index: 1;
        }

        25% {
            height: 1.5rem;
            width: 1.5rem;
        }

        50% {
            animation-timing-function: ease-in-out;
            opacity: 1;
            transform: translate3D(4rem, 3rem, 0);
            z-index: 1;
        }

        55% { z-index: -1; }

        75% {
            height: .75rem;
            opacity: .5;
            width: .75rem;
        }

        100% {
            transform: translate3D(-3rem, -3rem, 0);
            z-index: -1;
        }
    }

    @@-webkit-keyframes particle-b {
        0% {
            -webkit-animation-timing-function: ease-in-out;
            -webkit-transform: translate3D(3rem, -3rem, 0);
            z-index: 1;
        }

        25% {
            height: 1.5rem;
            width: 1.5rem;
        }

        50% {
            -webkit-animation-timing-function: ease-in-out;
            -webkit-transform: translate3D(-3rem, 3.5rem, 0);
            opacity: 1;
            z-index: 1;
        }

        55% { z-index: -1; }

        75% {
            height: .5rem;
            opacity: .5;
            width: .5rem;
        }

        100% {
            -webkit-transform: translate3D(3rem, -3rem, 0);
            z-index: -1;
        }
    }

    @@-moz-keyframes particle-b {
        0% {
            -moz-animation-timing-function: ease-in-out;
            -moz-transform: translate3D(3rem, -3rem, 0);
            z-index: 1;
        }

        25% {
            height: 1.5rem;
            width: 1.5rem;
        }

        50% {
            -moz-animation-timing-function: ease-in-out;
            -moz-transform: translate3D(-3rem, 3.5rem, 0);
            opacity: 1;
            z-index: 1;
        }

        55% { z-index: -1; }

        75% {
            height: .5rem;
            opacity: .5;
            width: .5rem;
        }

        100% {
            -moz-transform: translate3D(3rem, -3rem, 0);
            z-index: -1;
        }
    }

    @@-o-keyframes particle-b {
        0% {
            -o-animation-timing-function: ease-in-out;
            -o-transform: translate3D(3rem, -3rem, 0);
            z-index: 1;
        }

        25% {
            height: 1.5rem;
            width: 1.5rem;
        }

        50% {
            -o-animation-timing-function: ease-in-out;
            -o-transform: translate3D(-3rem, 3.5rem, 0);
            opacity: 1;
            z-index: 1;
        }

        55% { z-index: -1; }

        75% {
            height: .5rem;
            opacity: .5;
            width: .5rem;
        }

        100% {
            -o-transform: translate3D(3rem, -3rem, 0);
            z-index: -1;
        }
    }

    @@keyframes particle-b {
        0% {
            animation-timing-function: ease-in-out;
            transform: translate3D(3rem, -3rem, 0);
            z-index: 1;
        }

        25% {
            height: 1.5rem;
            width: 1.5rem;
        }

        50% {
            animation-timing-function: ease-in-out;
            opacity: 1;
            transform: translate3D(-3rem, 3.5rem, 0);
            z-index: 1;
        }

        55% { z-index: -1; }

        75% {
            height: .5rem;
            opacity: .5;
            width: .5rem;
        }

        100% {
            transform: translate3D(3rem, -3rem, 0);
            z-index: -1;
        }
    }

    @@-webkit-keyframes particle-c {
        0% {
            -webkit-animation-timing-function: ease-in-out;
            -webkit-transform: translate3D(-1rem, -3rem, 0);
            z-index: 1;
        }

        25% {
            height: 1.3rem;
            width: 1.3rem;
        }

        50% {
            -webkit-animation-timing-function: ease-in-out;
            -webkit-transform: translate3D(2rem, 2.5rem, 0);
            opacity: 1;
            z-index: 1;
        }

        55% { z-index: -1; }

        75% {
            height: .5rem;
            opacity: .5;
            width: .5rem;
        }

        100% {
            -webkit-transform: translate3D(-1rem, -3rem, 0);
            z-index: -1;
        }
    }

    @@-moz-keyframes particle-c {
        0% {
            -moz-animation-timing-function: ease-in-out;
            -moz-transform: translate3D(-1rem, -3rem, 0);
            z-index: 1;
        }

        25% {
            height: 1.3rem;
            width: 1.3rem;
        }

        50% {
            -moz-animation-timing-function: ease-in-out;
            -moz-transform: translate3D(2rem, 2.5rem, 0);
            opacity: 1;
            z-index: 1;
        }

        55% { z-index: -1; }

        75% {
            height: .5rem;
            opacity: .5;
            width: .5rem;
        }

        100% {
            -moz-transform: translate3D(-1rem, -3rem, 0);
            z-index: -1;
        }
    }

    @@-o-keyframes particle-c {
        0% {
            -o-animation-timing-function: ease-in-out;
            -o-transform: translate3D(-1rem, -3rem, 0);
            z-index: 1;
        }

        25% {
            height: 1.3rem;
            width: 1.3rem;
        }

        50% {
            -o-animation-timing-function: ease-in-out;
            -o-transform: translate3D(2rem, 2.5rem, 0);
            opacity: 1;
            z-index: 1;
        }

        55% { z-index: -1; }

        75% {
            height: .5rem;
            opacity: .5;
            width: .5rem;
        }

        100% {
            -o-transform: translate3D(-1rem, -3rem, 0);
            z-index: -1;
        }
    }

    @@keyframes particle-c {
        0% {
            animation-timing-function: ease-in-out;
            transform: translate3D(-1rem, -3rem, 0);
            z-index: 1;
        }

        25% {
            height: 1.3rem;
            width: 1.3rem;
        }

        50% {
            animation-timing-function: ease-in-out;
            opacity: 1;
            transform: translate3D(2rem, 2.5rem, 0);
            z-index: 1;
        }

        55% { z-index: -1; }

        75% {
            height: .5rem;
            opacity: .5;
            width: .5rem;
        }

        100% {
            transform: translate3D(-1rem, -3rem, 0);
            z-index: -1;
        }
    }
</style>

<!--[if IE 9]>
    <style>
        .error-text { color: #333 !important; }

        .particle { display: none; }
    </style>
<![endif]-->
<!-- row -->
<div class="row">

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

        <div class="row">
            <div class="col-sm-12">
                <div class="text-center error-box">
                    <h1 class="error-text-2 bounceInDown animated">
                        Error 404 <span class="particle particle--c"></span><span class="particle particle--a"></span><span class="particle particle--b"></span>
                    </h1>
                    <h2 class="font-xl">
                        <strong><i class="fa fa-fw fa-warning fa-lg text-warning"></i> Page <u>Not</u> Found</strong>
                    </h2>
                    <br/>
                    <p class="lead">
                        The page you requested could not be found, either contact your webmaster or try again. Use your browsers <b>Back</b> button to navigate to the page you have prevously come from
                    </p>
                    <p class="font-md">
                        <b>... That didn't work on you? Dang. May we suggest a search, then?</b>
                    </p>
                    <br>
                    <div class="error-search well well-lg padding-10">
                        <div class="input-group">
                            <input class="form-control input-lg" type="text" placeholder="let's try this again" id="search-error">
                            <span class="input-group-addon">
                                <i class="fa fa-fw fa-lg fa-search"></i>
                            </span>
                        </div>
                    </div>

                    <div class="row">

                        <div class="col-sm-12">
                            <ul class="list-inline">
                                <li>
                                    &nbsp;<a href="javascript:void(0);">Dashbaord</a>&nbsp;
                                </li>
                                <li>
                                    .
                                </li>
                                <li>
                                    &nbsp;<a href="javascript:void(0);">Inbox (14)</a>&nbsp;
                                </li>
                                <li>
                                    .
                                </li>
                                <li>
                                    &nbsp;<a href="javascript:void(0);">Calendar</a>&nbsp;
                                </li>
                                <li>
                                    .
                                </li>
                                <li>
                                    &nbsp;<a href="javascript:void(0);">Gallery</a>&nbsp;
                                </li>
                                <li>
                                    .
                                </li>
                                <li>
                                    &nbsp;<a href="javascript:void(0);">My Profile</a>&nbsp;
                                </li>
                            </ul>
                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>
</div>
<!-- end row -->
@section Scripts {
    <script type="text/javascript">
        /* DO NOT REMOVE : GLOBAL FUNCTIONS!
	 *
	 * pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
	 *
	 * // activate tooltips
	 * $("[rel=tooltip]").tooltip();
	 *
	 * // activate popovers
	 * $("[rel=popover]").popover();
	 *
	 * // activate popovers with hover states
	 * $("[rel=popover-hover]").popover({ trigger: "hover" });
	 *
	 * // activate inline charts
	 * runAllCharts();
	 *
	 * // setup widgets
	 * setup_widgets_desktop();
	 *
	 * // run form elements
	 * runAllForms();
	 *
	 ********************************
	 *
	 * pageSetUp() is needed whenever you load a page.
	 * It initializes and checks for all basic elements of the page
	 * and makes rendering easier.
	 *
	 */

        pageSetUp();

        /*
         * ALL PAGE RELATED SCRIPTS CAN GO BELOW HERE
         * eg alert("my home function");
         *
         * var pagefunction = function() {
         *   ...
         * }
         * loadScript("/js/plugin/_PLUGIN_NAME_.js", pagefunction);
         *
         * TO LOAD A SCRIPT:
         * var pagefunction = function (){
         *  loadScript(".../plugin.js", run_after_loaded);
         * }
         *
         * OR
         *
         * loadScript(".../plugin.js", run_after_loaded);
         */

        // pagefunction

        var pagefunction = function() {

        };

        // end pagefunction

        // run pagefunction on load
        pagefunction();

    </script>
}
